import React from 'react';

// 因为每个组件都需要引入仓库，为了简化才有了react-redux
import store from '@/store';
import {bindActionCreators} from 'redux';
import * as actions from '@/store/actions/user'

class Store extends React.Component{
    constructor(props){
        super(props);
         console.log('store',this);
        // this.goHome=this.goHome.bind(this);
        console.log('store--',store);

        console.log('store--getState',store.getState());
        store.dispatch(actions.setName('jaasdsa'));
        console.log('store--getState',store.getState());

        this.boundActionCreators=bindActionCreators(actions,store.dispatch);
        console.log('boundActionCreators',this.boundActionCreators);

        this.state=store.getState().user;
        console.log('store1',this);
    }   
    componentDidMount(){
        console.log('componentDidMount',this);
        this.unsubscribe=store.subscribe((s)=>{
            console.log('subscribe',s);
            console.log(store.getState());
            this.setState({...this.state,...store.getState().user})            
        })
    }
    componentWillUnmount(){
        console.log('componentWillUnmount');
        this.unsubscribe();
    }

    // es7语法,解决手动bind(this)需要@babel/plugin-proposal-class-properties插件支持
    goHome=()=>{
        this.props.history.push('/',{name:'jaasdsa'})
    }

    changeName=()=>{
         store.dispatch(actions.setName('1234'));
        //this.props.setName('123');// 能够自动刷新组件
    }

    render() {
        // console.log('user',this.props);
        return <div>
            <h6>Store</h6>
            <button onClick={this.goHome.bind(this)}>去首页</button>
            <button onClick={this.changeName}>改名字</button>
            <p>{this.state.name}</p>
        </div>
    }
}

export default Store;

